<template>
  <div class="main" v-if="store.state.client && store.state.client.Rooms">
    <div class="window-item" @click="selectRoom(room)" v-for="room in inspectionList" :key="room.ID">
      <div class="item-text">{{room.Name}}</div>
      <div class="item-count">检查单数量:{{InspectionCount(room.HisId)}}</div>
    </div>
    <el-empty
    description="没有找到检查申请单"
    v-if="inspectionList.length === 0"
    :image-size="200"></el-empty>
  </div>
</template>

<script lang="ts">
import { Component } from 'vue-property-decorator'
import { mixins } from 'vue-class-component'
import { IRoom } from '@/interface/common'
import ReservationMixin from '@/mixins/reservation'
import { GetInspectionList } from './apis/inspection'
import { IApplyInfoList, IReservationInspectionQuery, IReservationInspection } from './interface/inspection'

@Component
export default class Room extends mixins(ReservationMixin) {
  private async created () {
    this.setTip('请选择诊室')
    this.setMaxTime(30)
    this.updateTimeHandler('home')
    if (this.store.state.client === undefined || this.store.state.client.Rooms === undefined || this.store.state.client.Rooms.length === 0) {
      this.$messageBox.show({ content: '很抱歉, 当前没有可用诊室.' })
      return
    }
    this.init()
  }

  /**
   * 申请单列表
   */
  private list : IReservationInspection[] = []

  private get inspectionList () {
    return this.store.state.client.Rooms.filter(e => this.InspectionCount(e.HisId) > 0)
  }

  private InspectionCount (roomId: string) {
    return this.list.filter(e => e.roomId === roomId).length
  }

  /**
   * 加载申请单列表
   */
  private async init () {
    try {
      this.logger.info('加载申请单列表')
      this.showLoading()
      for (let i = 0; i < this.store.state.client.Rooms.length; i++) {
        if (i > 0) break
        const room = this.store.state.client.Rooms[i]
        if (!room.HisId) {
          this.logger.warning(`加载申请单列表失败, 无效的诊室信息:${JSON.stringify(room)}`)
          this.$messageBox.show({ content: '无效的诊室信息' })
          return
        }
        const query : IReservationInspectionQuery = {
          RoomId: room.HisId
        }
        if (this.store.state.InHosNo) {
          query.InHosNo = this.store.state.patient?.CardNo
        } else {
          query.CardNo = this.store.state.patient?.CardNo
        }
        const result = await GetInspectionList(query)
        if (result.data?.Code === 200) {
          const applyInfo : IApplyInfoList = JSON.parse(result.data.Data)
          for (let index = 0; index < applyInfo.applyInfoList.length; index++) {
            const element = applyInfo.applyInfoList[index]
            if (this.list.findIndex(e => e.applyNo === element.applyNo) === -1) {
              this.list.push(element)
            }
          }
          continue
        }
        if (result.data?.Code === 1) {
          this.logger.warning(`获取申请单列表失败, 返回信息:${result.data.Message}`)
          continue
        }
        this.logger.warning(`加载申请单列表失败, 返回信息:${result.data}`)
      }
      this.store.state.InspectionList = this.list
      setTimeout(() => {
        this.hideLoading()
      }, 300)
    } catch (error) {
      this.logger.error(`加载申请单列表异常,${error}`)
      this.$messageBox.show({ content: '获取申请单失败' })
    }
  }

  // 选择诊室
  private selectRoom (room : IRoom) {
    this.store.commit('updateRoom', room)
    switch (this.store.state.bizType) {
      case '签到':
        this.clearTimeout()
        this.navigateTo(`/${this.getRoute()}/inspection-list`)
        break
    }
  }
}
</script>
<style>
  .el-empty__description p{
    font-size: 22px;
  }
</style>
<style scoped>
  .main {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    height: 100%;
    align-items: center;
  }
  .window-item {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 25rem;
    height: 25rem;
    background-color: #388cc1;
    color: white;
    box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    font-size: 3rem;
    margin: 1rem;
  }
  .item-icon {
    font-size: 8rem;
  }
  .item-count{
    font-size: 2rem;
    color: yellow;
  }
</style>
